<template>
  <el-drawer v-model="dialogVisible" title="培训材料" size="80%">
    <div class="common-seach-wrap" :style="{ marginBottom: '10px' }">
      <el-button
        type="primary"
        icon="Plus"
        @click="handleAdd"
        v-auth="'train_file_add'"
        >添加资料</el-button
      >
    </div>
    <el-table :data="tableData" row-key="id" height="90%" stripe>
      <el-table-column label="文件名" width="400">
        <template #default="scope">
          <el-link :href="scope.row.file_url" type="primary">{{
            scope.row.file_name
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="download_num" label="下载次数" />
      <el-table-column prop="create_time" label="上传时间" />
      <el-table-column prop="author.real_name" label="上传人" />
      <el-table-column label="操作" fixed="right" width="300">
        <template #default="scope">
          <el-button
            type="danger"
            link
            icon="DeleteFilled"
            @click="delInfo(scope.row.id)"
            v-auth="'train_file_del'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showAdd" title="添加资料" :close-on-click-modal="false">
      <el-upload
        class="upload-demo"
        drag
        :file-list="file_list"
        :action="apiUrl + '/upload/file'"
        :limit="5"
        accept=".doc,.docx,.pdf,.mp4"
        name="iFile"
        :auto-upload="false"
        multiple
        :data="{ group_id: -1, file_type: 'file' }"
        :headers="{ Token: userStore.token, appid: userStore.app_id }"
        :on-success="handleFile"
        :on-error="handleFileError"
        :on-remove="handleFileRemove"
        ref="uploadRef"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖动文件到此处 或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">请上传文件，文件不要超过20M</div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">关闭</el-button>
          <el-button type="primary" @click="submitForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-drawer>
</template>

<script setup lang="ts">
import { delFileApi, saveFileApi, trainFileApi } from "@/api/company/train";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import useUserStore from "@/store/model/user";
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const dialogVisible = ref(false);
const station_id = ref(0);
const tableData = ref([]);
const showAdd = ref(false);
const file_list = ref<any[]>([]);
const formData = ref({
  file_ids: [],
  station_id: 0,
  department_id: 0,
});
const uploadRef = ref<any>(null);
function getTableInfo() {
  trainFileApi({ station_id: station_id.value }).then((res) => {
    tableData.value = res.data.data;
  });
}
const dialogOpen = (id: number, depId: number) => {
  dialogVisible.value = true;
  station_id.value = id;
  formData.value.station_id = id;
  formData.value.department_id = depId;
  getTableInfo();
};

const delInfo = (id: number) => {
  ElMessageBox.confirm("确定删除该文件吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    delFileApi(id).then((res) => {
      ElMessage.success("删除成功");
      getTableInfo();
    });
  });
};
const handleFile = (res: any) => {
  console.log(res);
  if (res.code != 1) {
    ElMessage.error(res.msg);
    file_list.value = [];
  } else {
    formData.value.file_ids.push(res.data.file_id);
    saveFileApi(formData.value).then((res: any) => {
      ElMessage.success("添加成功");
      formData.value.file_ids = [];
      file_list.value = [];
      uploadRef.value.clearFiles();
      dialogClose();
      getTableInfo();
    });
  }
};
const handleFileRemove = (file: any) => {
  console.log(file);
};
const handleFileError = () => {
  ElMessage.error("上传失败");
};
const handleAdd = () => {
  showAdd.value = true;
};
function submitForm() {
  uploadRef.value.submit();
}

const dialogClose = () => {
  showAdd.value = false;
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-select {
  width: 200px;
}
.upload-demo {
  .el-icon svg {
    height: 3em;
    width: 3em;
  }
}
</style>

<style lang="scss" scoped></style>
